<template>
	<div class="Classify">
		<header>
			<Search class="Search"></Search>
		</header>
		<div class="scroll">
			<div class="scroll-menu">
				<ul>
					<li v-for="(item,index) of menuBar"
						@click="handleClick(index)"
						:class="{on:currentIndex===index}"
						>
						{{item}}
					</li>
				</ul>
			</div>
			<div class="scroll-prolist" ref="proWrapper" >
				<ul class="pro"
					>
					<li 
						class="pro-classify" 
						v-for="items of prolist"
						ref="proClassify"
					>
						<ul class="pro-items">
							<router-link 
								tag="li"
								to="/Detail"
								 v-for="item of items">
								<div class="img">
									<img :src="item.imgUrl">
								</div>
								<span>{{item.proDec}}</span>
							</router-link>
						</ul>
					</li>
					
					
				</ul>
			</div>
		</div>
		<MenuBar></MenuBar>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		name:"Classify",
		data(){
			return {
				prolist:[],
				menuBar:[],
				listHeigth:[],
				scrollY:0
			}
		},
		computed:{
			currentIndex(){
				for(let i=0;i<this.listHeigth.length;i++)
				{
					let h1=this.listHeigth[i];
					let h2=this.listHeigth[i+1];
					
					if(!h2 || (this.scrollY>=h1 && this.scrollY<h2))
					{
						return i
					}
					
					
				}
				return 0;
			}
		},
		methods:{
			initScroll(){ 
				this.proScroll=new BScroll(this.$refs.proWrapper,{
					probeType:3,
					scrollbar:true,
					click:true
				})
				this.proScroll.on('scroll',(pos)=>{
					this.scrollY=Math.abs(Math.round(pos.y))
				})
			},
			handleClick(i){
				let prolist=this.$refs.proClassify;
				let el=prolist[i];
				this.proScroll.scrollToElement(el,300);
			},
			getHeight(){
				let prolist=this.$refs.proClassify
				let height=0;
				this.listHeigth.push(height);
				for(let i=0;i<prolist.length;i++)
				{
					let item=prolist[i];
					height+=item.clientHeight;
					this.listHeigth.push(height);
				}
				
			}
		},
		mounted(){
			this.$http.get('/api/Classify.json')
			.then((res)=>{
				let resData=res.data
				this.menuBar=resData.menuBar
				this.prolist=resData.prolist
				this.$nextTick(()=>{
					this.initScroll()
					this.getHeight();
				})
			})
		}
		
	}
</script>

<style lang="scss" scoped>
.Classify{
	header{
		width: 100%;
		height: 94px;
		background:#FF9900;
		background-size:100%;
		position: fixed;
		overflow: hidden;
		z-index: 999;
		top:0;
		.Search{
			margin: 0 auto;
			margin-top: 20px;
		}
	}
	.scroll{
		margin-top: 94px;
		display: flex;
		.scroll-menu{
			width: 234px;
			background:#eee;
			ul{
				li{
					height: 93px;
					text-align: center;
					line-height: 93px;
					font-size: 28.13px;
				}
				.on{
					background:url("~img/classify/menu-bg.jpg") no-repeat;
				}
			}
		}
		.scroll-prolist{
			width: 516px;
			height:0;			
			.pro{
				.pro-classify{
					.pro-items{
						
						display: flex;
						flex-wrap:wrap;
						justify-content:space-around;
						flex:1;
						li{
							width: 224px;
							height: 233px;
							border: 3px solid #1d84a7;
							border-radius:7px;
							margin: 10px 0;
							
							.img{
								width: inherit;
								height: 186px;
								position: relative;
								img{
									width: 164px;
									height: 172px;
									position: absolute;
									bottom: 1px;
									left: 0;
									right: 0;
									margin: auto;
								}
							}
							span{
								width:100%;
								display: block;
								text-align: center;
								height: 47px;
								line-height: 47px;
								font-size: 23px;
								background: #1d84a7;
								color: #fff;
							}
						}
						
					}
				}
			}
		}
	}
	
}

</style>